<template>
  <div class="add">
    <div class="title">
      <h3>发表文章</h3>
    </div>
    <div class="content">
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="文章标题" prop="title">
          <el-input v-model="form.title" placeholder="请输入标题"></el-input>
        </el-form-item>
        <el-form-item label="文章分类" prop="category">
          <el-select v-model="form.category" placeholder="请选择分类">
            <el-option label="运动" value="yd"></el-option>
            <el-option label="时尚" value="ss"></el-option>
            <el-option label="科技" value="kj"></el-option>
            <el-option label="IT" value="it"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="文章内容" prop="content">
          <quillEditor
            class="edit"
            v-model="form.content"
            @blur="$refs.form.validateField('content')"
          ></quillEditor>
        </el-form-item>
        <!-- 图片上传 -->
        <el-form-item label="文章封面" style="margin-top: 80px">
          <el-upload action=""  list-type="picture-card" :auto-upload="false" :on-change="change">
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{ file }">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              />
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
                >
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleDownload(file)"
                >
                  <i class="el-icon-download"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit('已发布')">发布</el-button>
          <el-button @click="submit('草稿')">存为草稿</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'
import { addArticle } from '@/api/article'
export default {
  components: {
    quillEditor
  },
  data () {
    return {
      form: {
        cate_id: 1, // id
        title: '', // 标题
        category: '', // 类别
        content: '', // 内容
        file: '',
        state: '' // 状态
      },
      rules: {
        title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
        category: [
          { required: true, message: '请选择文章分类', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入文章内容', trigger: 'blur' }
        ]
      },
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false
    }
  },
  methods: {
    handleRemove (file) {
      console.log(file)
    },

    // 提交
    async submit (type) {
      this.cate_id += 1
      const formData = new FormData()
      formData.append('title', this.form.title)
      formData.append('cate_id', this.form.cate_id)
      formData.append('content', this.form.content)
      formData.append('state', type)
      formData.append('cover_img', this.form.file)
      //   console.log(this.form.file)
      await addArticle(formData)
      this.$message.success('发布成功')
      this.$emit('changeShow')
    },
    change (file) {
      this.form.file = file.raw
    }
  }
}
</script>

<style lang="less" scoped>
.add {
  padding: 30px;
  .content {
    margin-top: 50px;
    /deep/ .el-form-item__label {
      text-align: left;
    }
    /deep/ .el-input__inner {
      width: 1500px;
    }
    .edit {
      width: 1500px;
      height: 200px;
    }
  }
}
</style>
